<template>
  <div>
    <h1>分类详情</h1>
    <div>
      <p><strong>分类名称:</strong> {{ category.name }}</p>
      <p><strong>分类描述:</strong> {{ category.description }}</p>
      <button @click="goBack">返回</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      category: {},
    };
  },
  mounted() {
    const id = this.$route.query.id; // 获取分类 ID
    this.$http.get(`/category/${id}`).then(response => {
      this.category = response.data.data; // 假设返回的数据结构
    });
  },
  methods: {
    goBack() {
      this.$router.push('/'); // 返回分类列表
    },
  },
};
</script>

<style>
h1 {
  color: #42b983; /* 标题颜色 */
}

div {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  margin-top: 20px;
}

button:hover {
  background-color: #36a372; /* 悬停效果 */
}
</style>
